<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <input type="number" ng-model="number">
        <button ng-click="square()">x*x</button>
        <h2>{{result}}</h2>
    </div>
    <script src="../js/angular165/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.config(function($provide) {
            $provide.provider('MathService', function() {
                this.$get = function() {
                    var factory = {};
                    factory.multiply = function(a, b) {
                        return a * b;
                    }
                    return factory;
                }
            })
        })

        app.value("defaultInput", 5);

        app.service('CalcService', function(MathService) {
            this.square = function(a) {
                return MathService.multiply(a, a);
            }
        });

        app.controller('myCtrl', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);
            $scope.square = function() {
                $scope.result = CalcService.square($scope.number);
            }
        })
    </script>
</body>

</html>